<!doctype html>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<style type="text/css">
    .test{
        width:300px;
        height:300px;
        background-color: lightblue;
        transform:translate3d(0,0,0);
        transition-duration: 0.5s;
        transition-property: all;
    }
    .to-right{
        transform:translate3d(200px,0,0);
     }
</style>
    <div id='test' class = "test">

    </div>
<script type="text/javascript">
    function test1(){
            var a = {a:1};
             document.querySelector('#test').addEventListener('click',function(){
                 this.removeEventListener('transitionend');
                 this.addEventListener('transitionend',function(){
                      function abc(){
                           var bcd = function(){
                                dfe.aaa;
                           }
                          bcd();
                      }
                     abc();
                 });
                 if(this.classList.contains('to-right')){
                     this.classList.remove('to-right');
                 }else{
                     this.classList.add('to-right');
                 }
             },false);


        }

        function test2(){
            test1();
        }

        function test3(){
            test2();
        }
        test3();

</script>

</body>
</html>